<template>
    <div class="cards">
            <van-row>
                <van-col>
                    <div class="cards_img">
                        <van-image
                            radius="0.1rem"
                            width="1.3rem"
                            height="1.3rem"
                            :src="data.imgurl"
                        />
                    </div>
                </van-col>
                <van-col offset="1">
                    <div class="card_name">
                        {{data.name}}
                        <p class="cards_date">{{data.date}}</p>
                    </div>
                </van-col>
            </van-row>
            <van-divider />
            <van-row>
                <div class="card_info">
                    {{data.info}}
                </div>
            </van-row>
            <van-row>
                <van-col offset="20">
                    <van-button plain hairline type="info" icon=“comment-o” size="mini" @click="showPopup">评论</van-button>
                </van-col>
            </van-row>
            <br />
            <van-row>
                <div class="card_comment" v-for="comment in data.comment" :key="comment.id">
                    <van-row>
                        <van-col>
                            <div class="card_comment_name">
                                {{comment.commentname}}:
                            </div>
                        </van-col>
                        <van-col>
                            <div class="card_comment_info">
                                {{comment.commentinfo}}
                            </div>
                        </van-col>
                    </van-row>
                </div>
            </van-row>


            <van-dialog v-model="show" title="发表一条友善的评论" @confirm="commentcommit" show-cancel-button>
                <van-field
                    v-model="commentmessage"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
            </van-dialog>
        </div>
</template>
<script>
const axios = require('axios');
export default{
    props:['data'],
    data(){
        return{
            commentmessage:"",
            show:false,
        }
    },
    methods:{
        showPopup() {
            this.show = true;
        },
        commentcommit(){
            // console.log(this.commentmessage)
            // console.log(this.data.comment)
            if(this.$root.username == ''){
                this.$toast.success('登录后才可以进行评论');
            }
            else{
                console.log(this.data.comment.push(
                                {
                                "commentname":this.$root.userid,
                                "commentinfo":this.commentmessage
                                }
                            ))
                axios({
                method:"patch",
                url:"http://localhost:3000/comment/"+this.data.id,
                data:{
                    "comment":
                            this.data.comment
                    }
                }).then((data)=>{
                    console.log(data);
                })
                this.$toast.success('评论成功');
        }
            }

    }
}
</script>

<style>
    .cards{
        /* border: 1px solid; */
        width: 100%;
        border-radius: 5px;
    }
    .cards_img{
        height: 50px;
        width: 50px;
        /* border: 1px solid; */
        margin-top: 10px;
        margin-left: 10px; ;
    }
    .card_name{
        height: 50px;
        /* border: 1px solid; */
        font-size: 13;
        font-weight: bold;
        margin-top: 10px;
    }
    .cards_date{
        color: #969799;
    }
    .card_info{
        margin-left: 10px;
    }
    .card_comment{
        margin-left: 10px;
        width: 90%;
        background-color:#F2f3F5;
        border-radius: 5px;

    }
    .card_comment_name{
        font-weight: bold;
    }
</style>
